<template>
	<view class="contioner">
		<scroll-view class="scroll" scroll-y="true" @scrolltolower="scrolltolower">
			<view class="MV_box">
				<view class="MV" v-for="mv in mvList" :key="mv.id" @click="goMv(mv.id)">
					<image :src="mv.cover" mode="widthFix" lazy-load="true"></image>
					<view class="info">
						<text class="name">{{ mv.name }}</text>
						<text class="artistName">作者：{{ mv.artistName }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		getMVAPI
	} from '@/common/api/audioBlogsAPI.js'
	import {
		onMounted,
		reactive,
		ref
	} from "vue";

	const mvList = ref([])

	const queryInfo = reactive({
		area: '全部',
		offset: 0,
		limit: 30,
		order: '最热'
	})

	const getMV = async (params) => {
		const res = await getMVAPI(params)
		if (res.code !== 200) uni.showToast({
			title: '获取mv失败',
			duration: 2000,
			icon: 'error'
		})
		mvList.value.push(...res.data)
	}
	
	const scrolltolower = () => {
		queryInfo.offset = queryInfo.offset + queryInfo.limit
		getMV(queryInfo)
	}
	
	const goMv = (id) => {
		uni.navigateTo({
			url:`/subpages/MV/MV?id=${id}`
		})
	}

	onMounted(() => {
		getMV(queryInfo)
	})
</script>

<style lang="scss" scoped>
	.contioner {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		background-color: #eee;
		.scroll{
			height: 100vh;
			.MV_box {
				display: flex;
				flex-wrap: wrap;
				
			
				.MV {
			
					width: 100%;
					box-shadow: 5px 5px 20px #666164;
					padding: 10px;
					margin: 10px;
					background-color: #fff;
					border-radius: 10px;
					overflow: hidden;
			
					image {
						width: 100%;
						border-radius: 10px;
					}
					.info{
						display: flex;
						flex-direction: column;
						width: 100%;
						.name{
							font-size: 10px;
						}
						.artistName{
							font-size: 15px;
							color: #41a863;
						}
					}
				}
			}
		}
	}
</style>